<template>
  <el-dialog
      title="编辑数据字典"
      :visible.sync="editDialogVisible"
      :before-close="closeDialog"
      width="700px"
      :close-on-click-modal="true"
      center>
    <span>
      <message
            v-show="showMsg"
            :title="msgTitle"
            type="error">
      </message>
      <el-form
          :model="dictForm"
          :rules="rules"
          ref="dictForm"
          label-width="100px"
          :inline="true"
          size="medium">
        <el-form-item label="字典编号">
          <el-input type="input" v-model="dictForm.dictId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" prop="dictName">
          <el-input type="input" v-model="dictForm.dictName"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="dictSeq">
          <el-input-number v-model="dictForm.dictSeq" controls-position="right" :min="1" :max="1000" style="width: 202px"></el-input-number>
        </el-form-item>
        <el-form-item label="Key值">
          <el-input type="input" v-model="dictForm.dictKey" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="显示值" prop="dictValue">
          <el-input type="input" v-model="dictForm.dictValue"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="dictSts">
          <el-select v-model="dictForm.dictSts" value="" style="width: 202px">
            <el-option v-for="dict in dicts" :key="dict.dictKey" :label="dict.dictValue" :value="dict.dictKey"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="medium">取 消</el-button>
        <el-button type="primary" @click="onSubmit('dictForm')" size="medium" :loading="loading">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  import Message from '../../templates/message/Message'

  export default {
    props: ['editDialogVisible', 'formData', 'dicts'],
    watch: {
      editDialogVisible: function() {
        this.showMsg = false
        if (this.$refs['dictForm']) {
          this.$refs['dictForm'].resetFields() // 清空表单，避免打开出现上次遗留
        }
      },
      formData: function() {
        this.dictForm = this._.cloneDeep(this.formData)
      }
    },
    data() {
      return {
        loading: false,
        rows: 3,
        dictForm: {
          dictId: '',
          dictName: '',
          dictSeq: 5,
          dictKey: '',
          dictValue: '',
          dictSts: 'Y'
        },
        rules: {
          dictName: [
            { required: true, message: '请填写数据字典名称', trigger: 'change' }
          ],
          dictSeq: [
            { required: true, message: '请填写排序号', trigger: 'change' }
          ],
          dictValue: [
            { required: true, message: '请填写显示值', trigger: 'change' }
          ],
          dictSts: [
            { required: true, message: '请填选择状态', trigger: 'change' }
          ]
        },

        // 错误信息
        showMsg: false,
        msgTitle: ''
      }
    },
    name: 'dict-edit',
    components: {Message},
    methods: {
      closeDialog() {
        this.$emit('closeDialog')
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false
          }

          this.loading = true
          let _this = this

          this.$http.post('/dict/edit', this.dictForm)
            .then(function(response) {
              if (response.success) {
                _this.showMsg = false
                _this.closeDialog()
              } else {
                _this.handleError(response.data.resultMessage)
              }
              _this.loading = false
            })
            .catch(function(error) {
              _this.handleError(error.message)
              _this.loading = false
            })
        })
      },
      handleError(msg) {
        this.showMsg = true
        this.msgTitle = msg
      }
    }
  }
</script>
